<template>
  <a-drawer
    placement="left"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="handleClose"
    wrapClassName="scrollbar"
    width="440"
  >
    <template v-slot:title>
      <a-tooltip placement="right" title="鼠标悬停展示动画, 点击选择动画">
        选择动画 <a-icon type="question-circle" />
      </a-tooltip>
    </template>
    <a-tabs v-model="animationActiveName" type="card">
      <a-tab-pane v-for="item in animationClassData" :key="item.label" :tab="item.label">
        <div class="animate-container">
          <div
            class="animate-wrap"
            v-for="animate in item.children"
            :key="animate.value"
            @mouseenter="handleRunAnimation(animate)"
            @click="handleClick(animate)"
          >
            <div :ref="animate.value" class="animate">
              {{ animate.label }}
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script>
import { mapState } from 'vuex'
import animationClassData from '../animationClassData'
import { runAnimation } from '../../../../lib/animate'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShowAnimation: false,
      hoverPreviewAnimate: '',
      animationActiveName: '进入',
      animationClassData,
      showAnimatePanel: false,
      timer: null,
    }
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: (state) => state.selectedComponent,
      animations: (state) => state.selectedComponent.animations,
    }),
  },
  methods: {
    async handleRunAnimation(animation) {
      if (animation.pending) return

      // animation.pending = true
      await runAnimation(this.$refs[animation.value][0], [animation])
      // animation.pending = false
    },
    handleClick(animation) {
      this.$emit('select', animation)
    },
    afterVisibleChange() {},
    handleClose() {
      this.$emit('close')
    },
  },
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>
